<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="个人信息编辑" left-arrow>
      <!-- 左边图标 -->
      <template #left>
        <span class="iconfont iconnew"></span>
      </template>

      <!-- 中间搜索 -->
      <template #title>
        <!-- 点击搜索，跳转到搜索页面 -->
        <div class="fake-search" @click="$router.push('/search')">
          <van-icon name="search" size="20" color="#fff" />
          <span>搜索商品</span>
        </div>
      </template>

      <!-- 右边图标 -->
      <template #right>
        <!-- 点击图标跳转到个人中心 -->
        <van-icon
          name="manager-o"
          color="#fff"
          size="30"
          @click="$router.push('/personalCenter')"
        />
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs v-model="currentTabIndex" @click="currentBtn(currentTabIndex)">
      <!-- 获取标签页的名称 -->
      <van-tab v-for="item in categoryList" :key="item.id" :title="item.name">
        <!-- 下拉刷新组件 isLoading变量 onRefresh函数，下拉刷新时触发 -->
        <!-- v-model控制是否加载中 -->
        <!-- @refresh，下拉刷新行为的时候，触发此事件，在事件里可以调用接口刷新数据 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- List的v-model表示是否加载中 -->
          <!-- finished表示是否加载完成，没有更多数据了 -->
          <!-- finished-text 表示加载完成之后，底部的文案 -->
          <!-- load 滚动条到底部的时候，要加载更多数据的时候触发 -->
          <!-- immediate-check 用于阻止初始化的时候触发load事件 -->
          <van-list
            v-model="bottomLoading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="loadMore"
          >
            <news-item
              v-for="item in newsList"
              :key="item.id"
              :news="item"
            ></news-item>
          </van-list>
        </van-pull-refresh>
      </van-tab>

      <van-icon class="add-channel-btn" name="plus" color="#000" size="30" />
    </van-tabs>
  </div>
</template>

<script>
import { getCategoryList, getNewsList } from "../api/news";
// 注册组件newsItem,获取文章列表详情
import newsItem from "../components/newsItem.vue";
export default {
  data() {
    return {
      currentTabIndex: 1,
      // 存储文章列表
      newsList: [],
      // 栏目列表
      categoryList: [],
      isLoading: false,
      bottomLoading: false,
      finished: false,
      // 页数
      pageIndex: 1,
      // 一页有多少条数据
      pageSize: 10,
    };
  },
  components: {
    "news-item": newsItem,
  },
  created() {
    // 调用栏目接口拿到栏目id
    getCategoryList().then((res) => {
      // console.log("栏目列表", res);
      const categories = res.data.data;
      this.categoryList = categories;
      this.loadNewsList(categories[this.currentTabIndex].id);
    });
  },
  methods: {
    loadNewsList(categoryId) {
      // 调用文章列表函数，获取文章列表
      getNewsList(categoryId, this.pageIndex, this.pageSize).then((res) => {
        // 如果是第一页数据，列表覆盖更新，不拼接
        if (this.pageIndex === 1) {
          this.newsList = res.data.data;
        } else {
          // concat方法用于合并数组，它并不改变原始数组，而是生成一个新数组
          this.newsList = this.newsList.concat(res.data.data);
        }
        // 拉取完数据后，关闭下拉刷新，异步接口
        this.isLoading = false;

        // 判断是否加载完成，用total先存储总数据
        const total = res.data.total;
        // 判断是否还有下一页
        if (total <= this.pageIndex * this.pageSize) {
          // 没有更多数据了
          this.finished = true;
        } else {
          // 还有更多数据
          this.finished = false;
        }
      });
    },
    // 下拉刷新
    onRefresh() {
      // 下拉刷新时，把pageIndex重置成第一页
      this.pageIndex = 1;
      // 1秒后加载完成
      // setTimeout(() => {
      //   this.isLoading=false
      // }, 1000);
      // 下拉刷新时调用接口刷新数据
      this.loadNewsList(this.categoryList[this.currentTabIndex].id);
    },
    // 加载更多
    loadMore() {
      // 加载下一页数据
      this.pageIndex++;
      // 拉取接口
      this.loadNewsList(this.categoryList[this.currentTabIndex].id);
    },
    // 标签页切换
    currentBtn() {
      getNewsList().then((res) => {
        this.loadNewsList(this.categoryList[this.currentTabIndex].id);
      });
    },
  },
};
</script>

<style lang='less' scoped>
// 图标大小
.iconnew {
  font-size: 60px;
}
// 导航栏颜色
.van-nav-bar {
  color: #fff;
  background-color: red;
}
// 导航中间假搜索
.fake-search {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  height: 100%;
  color: #fff;
}
// 穿透 中间插槽的宽高，圆角边框
/deep/ .van-nav-bar__title {
  width: 60%;
  height: 70%;
  border-radius: 30px;
}

.add-channel-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  background-color: #fff;
  font-weight: bold;
}

/deep/ .van-tabs__nav--line.van-tabs__nav--complete {
  padding-right: 50px;
}
</style>